<template>
  <div>
    <h1>app.vue</h1>
    <p>这是app里的p</p>

    <!-- 对于app.vue而言，他里面是有son自己的根标签 -->
    <!-- 也就是有它那个class为son的 div -->
    <!-- 所以即使加了scoped也能让son最外层的能匹配 -->
    <!-- 对于app而言，它只是有son这个最外面的根标签 -->
    <!-- son里面的内容对于app而言，不算是有，所以样式能匹配到最外面的根标签 -->
    <!-- 但是匹配不到它里面写的东西 -->

    <!-- 简单来说一句话：当前组件里写的标签能匹配到，当前页面没写的标签匹配不到 -->
    <son>
      <span>我是插槽传过去的span</span>
    </son>
  </div>
</template>

<script>
import son from './components/son'
export default {
  components: {
    son
  }
}
</script>


<style scoped>
/* 加scoped就是为了大部分的样式都不会影响全局，只不过可能某些少部分样式要给子组件用所以才用深度作用选择器  */

  /* 我就是想让子组件里的p在加了scoped后也能用到这个样式 */
  /* 那就该把样式穿透进去 */
  /* 这时候就要用深度作用选择器 */
  /* 
    深度作用选择器有三个写法：
      >>> （属于less才能识别的语法，sass不识别）
      /deep/ （半推荐，不管是less还是sass都支持）
      ::v-deep (不管原生还是别的css预处理，都识别，所以推荐)

      记住：使用::v-deep后面是要加一个空格的，代表后代选择器
  */
  ::v-deep p {
    color: red;
  }

  h3 {
    color: blue;
  }

  span {
    color: orange;
  }

  .son {
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,0,.5);
  }
</style>